<div class="gridFieldEditor row f-multi-select f-utils-fill">
  <div class="f-utils-fill f-multi-select-list d-flex flex-column">


    <div class="f-utils-flex-column f-multi-select-list-content f-utils-fill">

      <legend class="f-multi-select-list-title"> 未选择</legend>
      <div class="container columns-box f-utils-fill listPanel">
        <farris-treetable #tt class="h-100" [data]="sourceColumnsTreeData" [idField]="idField" [singleSelect]="false"
          [showIcon]="false" [showFilterBar]="false" [checkOnSelect]="true" [selectOnCheck]="true" [showCheckbox]="true"
          [showBorder]="false">
          <ng-template farrisTemplate="body" let-rowNode let-rowData="rowData">
            <tr #row="row" [selectRow]="rowNode" [dblclick]="true" [selectRowDisabled]="!canChecked(rowData)"
              [class.farris-table-selectedrow]="rowNode.isSelected">
              <td style="border: 0" [style.color]="row.selectRowDisabled? '#a2a2a2': '#333'">
                <farris-treeTableToggler [disabled]="!canChecked(rowData)" [rowNode]="rowNode">
                </farris-treeTableToggler>
                {{rowData['name']}} [{{ rowData['bindingField'] }}]
              </td>
            </tr>
          </ng-template>
        </farris-treetable>
      </div>
    </div>


  </div>

  <div class="f-multi-select-list-btns">
    <button title="右移" class="btn btn-secondary f-btn-icon" type="button" (click)="moveToRight()">
      <span class="f-icon f-icon-arrow-chevron-right"></span>
    </button>
    <button title="全部右移" class="btn btn-secondary f-btn-icon right-all" type="button" (click)="moveAllToRight()">
      <span class="f-icon f-icon-arrow-seek-right"></span>
    </button>
    <button title="左移" class="btn btn-secondary f-btn-icon" type="button" (click)="moveToLeft()">
      <span class="f-icon f-icon-arrow-chevron-left"></span>
    </button>
    <button title="全部左移" class="btn btn-secondary f-btn-icon" type="button" (click)="moveAllToLeft()">
      <span class="f-icon f-icon-arrow-seek-left"></span>
    </button>
  </div>
  <div class="f-utils-fill f-multi-select-list d-flex flex-column">
    <div class="f-utils-flex-column f-multi-select-list-content f-utils-fill">

      <legend class="f-multi-select-list-title">已选择</legend>

      <div class="container columns-box f-utils-fill mt-2 listPanel">
        <ul class="list-group list-group-flush">
          <li class="list-group-item" (click)="rightColumnChecked(col)" *ngFor="let col of selectedColumns"
            [class.active]="isChecked(col, 'r')" dndItem [class.inValidBinding]="col.isInValidBinding">
            {{ col.name }}
            <span *ngIf="!col.isInValidBinding">[{{ col.bindingField }}]</span>
            <span *ngIf="col.isInValidBinding">[{{ col.inValidTip }}]</span>
          </li>
        </ul>

      </div>

    </div>
  </div>
  <div class="f-multi-select-list-btns">
    <button title="置顶" type="button" class="btn btn-secondary f-btn-icon" (click)="moveTop()">
      <span class="f-icon f-icon-roofing"></span>
    </button>
    <button title="上移" type="button" class="btn btn-secondary f-btn-icon right-all" (click)="moveUp()">
      <span class="f-icon f-icon-arrow-double-60-up"></span>
    </button>
    <button title="下移" type="button" class="btn btn-secondary f-btn-icon" (click)="moveDown()">
      <span class="f-icon f-icon-arrow-double-60-down"></span>
    </button>
    <button title="置底" type="button" class="btn btn-secondary f-btn-icon" (click)="moveBottom()">
      <span class="f-icon f-icon-bottomsetting"></span>
    </button>
  </div>
</div>




<ng-template #gridFieldFooter>
  <button type="button" class="btn btn-secondary" (click)="clickCancel()">取消</button>
  <button type="button" class="btn btn-primary" (click)="clickConfirm()">确定</button>
</ng-template>